<template>
    <div class="ps-bz-shuichi">
        <section class="tableBox3">
            <el-select v-model="value" placeholder="请选择">
                <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
                <el-option value="11">111</el-option>
            </el-select>
        </section>
        <section>
            <div ref="echartContainer" style="width:100%; height:300px"></div>
        </section>
        <section class="video">
            <ul>
                <li v-if="videoList.length==0">暂无监控</li>
                <li v-for="item in videoList" :key="item.value">
                    <a :href="item.addressUrl" style="color:#000000"><i class="iconfont icon-shipin"></i>
                        <p>{{item.name}}</p>
                    </a>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            detailsList: [],
            siteIdData: {
                in: '',
                out: ''
            },
            water: {

            },
            videoList: [],
            mapId: {
                x: '120.222744',
                y: '30.191123'
            },
            value:''
        };
    },
    mounted() {
        this.select()
        this.getVideoList()
        // this.getWatertimeList()
    },
    methods: {
        //获取对应视频列表
        getVideoList() {
            this.$api.wushuichangjiance.videoList({
                id: this.$route.query.id
            }).then(res => {
                if (res.success) {
                    this.videoList = res.data.list1
                }
            });
        },
        //获取echart数据
        select() {
            let myChart = echarts.init(this.$refs.echartContainer);
            // myChart.resize()
            // this.getEveryDayEvent(() => {
            myChart.setOption({
                title: {
                    text: '流量',
                    // subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['实时', '昨日']
                },
                toolbox: {
                    show: true
                },
                calculable: true,
                grid: { // 控制图的大小，调整下面这些值就可以，
                    x: 40,
                    x2: 20,
                    y2: 30 // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '实时',
                        type: 'line',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '昨日',
                        type: 'line',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            });
            // });
        }
    }
}
</script>

<style>
</style>
